<!--没有团队没有加入团队-->
<template>
	<view class="noTeam">
		<uni-top fixed="true" statusBar="true" class="top" border="" background-color="#585cf7" color="#fff"
			left-text="全民经纪人" rightText="自组团队" @clickRight="goSetTeam"></uni-top>
		<view class="user">
			<view class="wrap">
				<view class="img_wrap">
					<image class="user_img" src="../../../static/image/page/logo@3x.png" mode="scaleToFill"></image>
				</view>
				<view class="tips">您还未加入任何合伙人团队</view>
				<view class="scode_wrap">
					<text class="uniicons" @click="scanCode">&#xe612;</text>
					<view class="scode_tips">
						<view class="scode_tip">扫码加入附近团队</view>
						<text class="scode_text">可享受最高0.1%额外奖励</text>
					</view>
				</view>
				<view class="btn_wrap">
					<!-- 	<wyb-button class="btn" :ripple="true" type="plain" color="#585cf7"
					:radius="radius" width="100%" height="80rpx" font-size="32rpx" @click="join"
						>加入官方团队</wyb-button> -->
					<view class="tipps">可享受最高0.1%额外奖励</view>
				</view>
			</view>
		</view>
		<!--end user-->
		<!--end 加入团队-->
		<view class="team">
			<block v-if="isjon">
				<view class="top">
					<text class="title">已加入团队</text>
					<text class="text">了解团队创建或加入规则？</text>
				</view>
				<view class="team_item">
					<view class="img_wrap">
						<image class="user_img" :src="joinTeamInfo.icon" mode="scaleToFit"></image>
					</view>
					<view class="center">
						<view class="name">
							<text class="team_naem">{{joinTeamInfo.name}}</text>
							<text class="level">T{{joinTeamInfo.grade || 0}}</text>
						</view>
						<view class="tips">余{{joinTeamInfo.surplus || 0}}个加入名额/ 额外奖励点5%</view>
					</view>
					<view class="right">
						<wyb-button class="btn" :ripple="true" type="plain" color="red" :radius="radius" width="140rpx"
							height="46rpx" font-size="24rpx" @click="cancelJoin">取消申请</wyb-button>
					</view>
				</view>
			</block>

			<view class="top">
				<text class="title">附近团队</text>
				<text class="text">了解团队创建或加入规则？</text>
			</view>

			<view class="team_list">
				<view class="team_item" v-for="(item, index) in teamList" :key="index">
					<view class="img_wrap">
						<image class="user_img" :src="item.icon" mode="scaleToFit"></image>
					</view>
					<view class="center">
						<view class="name">
							<text class="team_naem">{{item.teamName}}</text>
							<text class="level">T{{item.grade || 0}}</text>
						</view>
						<view class="tips">余{{item.surplus || 0}}个加入名额/ 额外奖励点5%</view>
					</view>
					<view class="right">
						<view class="distance">{{item.distance || 0}}m</view>
						<wyb-button class="btn" :ripple="true" type="plain" color="#585cf7" v-if="!isjon"
							:radius="radius" width="140rpx" height="46rpx" font-size="24rpx"
							@click="joinTeam(item.partnerId)">申请加入</wyb-button>
					</view>
				</view>
				<uni-load-more :status="status" v-if="pages > 1" />
			</view>
		</view>
		<!--end team-->
		<uni-popup ref="popup" type="dialog">
			<uniPopupMessage type="error" message="您的等级未到S3,暂时不能组建团队" :duration="2000"></uniPopupMessage>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		computed: {
			...mapState(["userInfo"]),
			isjon: function() {
				return this.joinTeamInfo.tid ? true : false;
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				radius: ["100px"],
				location: {
					//经度
					lo: "",
					//纬度
					la: "",
					pageNo: 0,
				},
				joinTeamInfo: {},
				pages: 0,
				pageNo: 0,
				teamList: [],
				status: 'more'
			}
		},
		onReachBottom: function() {
			let that = this;
			let pageNo = this.pageNo + 1;
			if (pageNo <= this.pageSize) {
				let queryData = JSON.parse(JSON.stringify(this.location));
				queryData.pageNo = pageNo;
				that.getMoreData(queryData)
			} else {
				that.status = "noMore"
			}
		},
		created() {
			this.start();
		},
		methods: {
			//位置修改为获取的变量
			start() {
				let that = this;
				//获取当前经纬度信息
				// #ifdef APP-PLUS
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.location.lo = res.longitude;
						that.location.la = res.latitude;
						that.getTeamNear({
							lo: res.longitude,
							la: res.latitude
						});
					},
					fail: function(err) {
						console.log(err)
					},
				});
				// #endif

				// #ifdef H5
				that.location.lo = "106.527248";
				that.location.la = "29.574008";
				that.getTeamNear({
					lo: "106.527248",
					la: "29.574008"
				});
				//#endif
			},
			//下拉事件
			onRe() {
				let that = this;
				let pageNo = this.pageNo + 1;
				if (pageNo <= this.pages) {
					let queryData = JSON.parse(JSON.stringify(this.location));
					queryData.pageNo = pageNo;
					that.getMoreData(queryData)
				} else {
					that.status = "noMore"
				}
			},
			//组建团队
			goSetTeam() {
				let that = this;
				//判断经纪人等级是否>=3;
				if (this.userInfo.grade < 3) {
					this.$refs.popup.open()
				} else {
					uni.navigateTo({
						url: "/pages/team/setUpTeam"
					})
				}
			},
			//获取附近团队
			getTeamNear(obj) {
				this.$api.getTeamNear(obj).then(res => {
					let resData = res.data.data.nearPage;
					this.joinTeamInfo = res.data.data.joinTeamInfo || {};
					this.pages = resData.pages;
					this.pageNo = resData.current;
					this.teamList = resData.records;
				})
			},
			getMoreData(obj) {
				this.$api.getTeamNear(obj).then(res => {
					let data = res.data.data.nearPage.records;
					if (data) {
						this.teamList = this.teamList.concat(data);
						this.pages = res.data.data.nearPage.pages;
						this.pageNo = res.data.data.nearPage.current;
					}
				})
			},
			//扫描二维码
			scanCode() {
				console.log(123456)
			},
			//立即加入官方团队
			join() {
				let that = this;
				this.$api.joinOfficial().then(res => {
					uni.showToast({
						title: res.data.message,
						duration: 2000
					});
					let usr = JSON.parse(JSON.stringify(this.userInfo))
					setTimeout(() => {
						usr.isTeam = 1;
						that.$store.commit("SET_USERINFO", usr);
					}, 1000)
				}).catch(() => {})
			},
			//加入团队
			joinTeam(obj) {
				let that = this;
				uni.showModal({
					title: '加入团队',
					content: '是否加入此团队',
					success: function(res) {
						if (res.confirm) {
							let parmas = {};
							parmas.partnerId = obj;
							that.goJoinTeam(parmas);
						}
					}
				});
			},
			goJoinTeam(obj) {
				let that = this;
				this.$api.joinTeamBy(obj).then(res => {
					that.start();
					uni.showToast({
						title: '申请成功',
						duration: 2000
					});
					let usr = JSON.parse(JSON.stringify(this.userInfo))
					setTimeout(() => {
						usr.isTeam = 1;
						that.$store.commit("SET_USERINFO", usr);
						that.$emit('refresh');
					}, 1000)
				}).catch(() => {})
			},
			//取消申请
			cancelJoin() {
				let that = this;
				uni.showModal({
					title: '取消团队',
					content: '是否取消申请加入此团队',
					success: function(res) {
						if (res.confirm) {
							that.$api.cancelJoinTeam().then(() => {
								that.start();
								uni.showToast({
									title: '取消申请成功',
									duration: 2000
								});
							})
						}
					}
				});

			}
		}
	}
</script>
<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.user {
		padding: 54rpx 30rpx 0;
		background: linear-gradient(to bottom, $dtg-color-primary 0%, $dtg-color-primary 35%, #f8f8f8 36%, #f8f8f8 100%);
		margin-bottom: 20rpx;

		.wrap {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			padding-top: 54rpx;
			position: relative;

			.img_wrap {
				width: 110rpx;
				height: 110rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				top: -54rpx;
				left: calc(50% - 55rpx);

				.user_img {
					width: 106rpx;
					height: 106rpx;
				}
			}

			.tips {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 90rpx;
				text-align: center;
			}

			.scode_wrap {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0 110rpx;

				.uniicons {
					font-size: 100rpx;
					color: $dtg-color-primary
				}

				.scode_tip {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 8rpx;
				}

				.scode_text {
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.btn_wrap {
			width: 550rpx;
			margin: 30rpx auto 0;

			.tipps {
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #F96363;
				margin-top: 26rpx;
			}
		}
	}

	.team {
		margin: 0 30rpx 40rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 68rpx;

			.title {
				font-size: 32rpx;
				color: #333333;
			}

			.text {
				font-size: 22rpx;
				font-weight: 500;
				color: $dtg-color-primary;
			}
		}

		.team_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.img_wrap {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				overflow: hidden;

				.user_img {
					width: 110rpx;
					height: 110rpx;
				}
			}

			.center {
				flex: 1;
				margin: 0 10rpx;
			}

			.right {
				width: 150rpx;
				text-align: center;
			}

			.team_naem {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.tips {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 40rpx;
			}

			.distance {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
			}

			.name {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
			}

			.level {
				font-family: unidin;
				background: #F96363;
				border-radius: 4rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				padding: 2rpx 10rpx;
				margin-left: 5px;
			}
		}

	}
</style>
